<template>
  <div>
    <div class="loading"></div>
    <div class="banner">
      <div class="bg"></div>
      <div class="slider">
        <swiper :options="swiperOption" v-if="banners.length">
          <swiper-slide v-for="banner in banners" :key="banner.id">
            <img :src="banner.picUrl" alt="">
          </swiper-slide>
          <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
      </div>
    </div>
    <section>
      <h1 class="section-title">推荐歌单</h1>
      <ul class="recommend-list">
        <li v-for="item in list" :key="item.id">
          <img v-lazy="item.picUrl" alt="">
          <span class="play-count">
            <i class="fa fa-headphones"></i> {{Math.floor(item.playCount / 10000) }}万
          </span>
          <div class="meta">
            <p class="name">{{item.name}}</p>
          </div>
        </li>
      </ul>
    </section>
    <section>
      <h1 class="section-title">推荐新歌</h1>
      <ul class="recommend-songs">
        <li v-for="item in songs" :key="item.key" @click="">
          <img v-lazy="item.image" alt="">
          <div class="meta">
            <p class="name">{{item.name}}</p>
            <p class="singer">{{item.singer}}</p>
          </div>
        </li>
      </ul>
    </section>
  </div>
</template>

<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
import { getAll } from "@/api/recommend";
import { dealWithSong } from "@/assets/js/helper";

export default {
  name: "banner",
  data() {
    return {
      swiperOption: {
        autoplay: true,
        loop: true,
        pagination: {
          el: ".swiper-pagination"
        }
      },
      banners: [],
      list: [],
      songs: []
    };
  },
  components: {
    swiper,
    swiperSlide
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      getAll().then(
        this.axios.spread((bannerRes, listRes, songRes) => {
          if (bannerRes.status == 200) {
            this.banners = bannerRes.data.banners;
          }
          if (listRes.status == 200) {
            let result = listRes.data.result
            result.splice(9);
            this.list = result
          }
          if (songRes.status == 200) {
            let result = songRes.data.result;
            result.splice(9);
            const songList = result.map(item => {
              return dealWithSong(item);
            });
            this.songs = songList;
          }
        })
      );
    }
    // _getBanner() {
    //   getBanner().then(res => {
    //     if (res.status == 200) {
    //       this.banners = res.data.banners;
    //     }
    //   });
    // },
    // _getRecommendList() {
    //   getRecommendList().then(res => {
    //     if (res.status == 200) {
    //       this.list = res.data.result.splice(24);
    //     }
    //   });
    // },
    // _getRecommendSong() {
    //   getRecommendSong().then(res => {
    //     if (res.status == 200) {
    //       let result = res.data.result;
    //       result.splice(6);
    //       const list = result.map(item => {
    //         return dealWithSong(item);
    //       });
    //       this.songs = list;
    //     }
    //   });
    // },
    // _getDjprogram() {
    //   getDjprogram().then(res => {
    //     if (res.status == 200) {
    //       this.djprogram = res.data.result;
    //     }
    //   });
    // }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import "./../../assets/scss/variable";
@import "./style.scss";
</style>
<style lang="scss">
@import "./../../assets/scss/variable";
.swiper-pagination-bullet {
  background: #fff;
  opacity: 1;
  &.swiper-pagination-bullet-active {
    background: $theme;
  }
}
</style>

